<template>
    <header :class="['header', customClass]" :style="styleObject">
        <div class="header-content">
            <slot></slot>
        </div>
    </header>
</template>

<script setup lang="ts">
import router from '@/router';
import { ref, defineProps, defineEmits } from 'vue';

interface Props {
    customClass?: string;
    headerStyle?: { [key: string]: string };
}

const props = defineProps<Props>();

const styleObject = ref(props.headerStyle || {});

const emits = defineEmits([]);
const fang=()=>{
    router.back()
}
</script>

<style scoped lang="scss">
.header {

    /* background-color: #f8f9fa; */
    padding: 10px;
    /* border-bottom: 1px solid #dee2e6; */

    padding: 5px; // 10px * 0.5 = 5px，原内边距缩小50%
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17.5px; // 35px * 0.5 = 17.5px，字体大小缩小50%
}
</style>
